<template>
  <view class="con">
    <!-- 新增 -->
    <view class="cont flex flex_between">
      <input class="cont_ipt" type="text" v-model="nikename" placeholder="请输入闲鱼昵称" />
      <view class="cont_btn" @click="addBtn">新增</view>
    </view>
    <!-- 列表 -->
    <view class="conUl">
      <view class="conUlt">闲鱼信息</view>
      <view class="conUlb">
        <view class="conUlb_li flex flex_between" v-for="(item,index) in list" :key="index">
          <view class="conUlb_liz">{{item.nikename}}</view>
          <image class="conUlb_liy" mode="widthFix" src="/static/mine/img35.png" @click="delectBtn(item)"></image>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow2" @click="hideTan"></view>
    <!-- 删除信息-确认框 -->
    <view class="tan" v-if="isShow2">
      <view class="zhes_2">
        <view class="zhes_3">确定删除该信息吗？</view>
        <view class="zhes_5Wrap flex flex_between">
          <view class="zhes_51" @click="hideTan">我再看看</view>
          <view class="zhes_52" @click="deletBtnSure">确认删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    xianMyxianinfo,//获取闲鱼信息
    xianXianInfodel,//删除闲鱼信息
    xianXianInfoadd//添加闲鱼信息
  } from '@/request/api.js'
  export default {
  	data() {
  		return {
         openid:uni.getStorageSync('openid'),//获取缓存的openid
         userInfo:uni.getStorageSync('userInfo'), //获取用户信息
         isShow2:false,
         list:[], //信息列表
         selectInfo:{} ,//选择删除信息
         nikename:"" //添加的昵称
      }
    },
    onLoad() {
      this.xianMyxianinfoFun()
    },
    methods: {
      // 获取列表
      xianMyxianinfoFun(){
        let param = {
          openid:this.openid
        }
        xianMyxianinfo(param).then(res=>{
          this.list = res.data
        })
      },
      // 新增
      addBtn(){
        if(this.nikename.trim()===''){
          uni.showToast({
            icon:'none',
            title:'请输入闲鱼昵称'
          })
        }else{
          let param = {
            openid:this.openid,
            nikename:this.nikename
          }
          xianXianInfoadd(param).then(res=>{
            console.log('新增结果')
            console.log(res)
            if (res.error_code === 0) {
              this.nikename = ''
              uni.showToast({
                icon: 'success',
                title: '添加成功'
              })
              this.xianMyxianinfoFun()
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
      },
      // 点击删除按钮
      delectBtn(item){
        console.log('删除的信息')
        console.log(item)
        this.isShow2 = true
        this.selectInfo = item
      },
      deletBtnSure(){
        console.log('选中的商品')
        console.log(this.selectXianYuInfo)
        let param = {
          openid:this.openid,
          id:this.selectInfo.id
        }
        xianXianInfodel(param).then(res=>{
          console.log('删除结果')
          console.log(res)
          if (res.error_code === 0) {
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
            this.isShow2 = false
            this.xianMyxianinfoFun()
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 关闭删除确认框
      hideTan(){
        this.isShow2 = false
      }
    }
    
  }
</script>

<style scoped lang="scss">
  .con{
    width: 100%;
    height: auto;
    padding: 20rpx;
    box-sizing: border-box;
    .cont{
      width: 100%;
      height: auto;
      margin-bottom: 80rpx;
      .cont_ipt{
        display: block;
        width: 460rpx;
        height: 80rpx;
        line-height: 80px;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        color: rgba(136,136,136,1);
        font-size: 28rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
      .cont_btn{
        width: 230rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
        text-align: center;
        color: rgba(16,16,16,1);
        font-size: 28rpx;
      }
    }
    .conUl{
      width: 100%;
      height: auto;
      .conUlt{
        color: rgba(0,0,0,1);
        font-size: 36rpx;
        margin-bottom: 30rpx;
      }
      .conUlb{
        width: 100%;
        height: auto;
        .conUlb_li{
          width: 100%;
          height: 140rpx;
          border-radius: 20rpx;
          background-color: rgba(255,255,255,1);
          padding: 0 30rpx;
          overflow: hidden;
          box-sizing: border-box;
          margin-bottom: 20rpx;
          .conUlb_liz{
            width: 90%;
            height: 140rpx;
            line-height: 140rpx;
            overflow: hidden;
            color: rgba(16,16,16,1);
            font-size: 28rpx;
          }
          .conUlb_liy{
            width: 40rpx;
            height: auto;
          }
        }
      }
    }
  }
  .zhes_2 {
    width: 100%;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-bottom: 8rpx;
  
    .zhes_2li {
      color: rgba(0, 0, 0, 1);
      font-size: 28rpx;
      font-weight: bold;
  
      text {
        font-family: 'AvantGardeFont';
      }
    }
  }
  .zhes_5Wrap {
    width: 100%;
    font-size: 28rpx;
    text-align: center;
  
    .zhes_51 {
      width: 240rpx;
      background-color: rgba(238, 238, 238, 1);
      border-radius: 100rpx;
      height: 72rpx;
      line-height: 72rpx;
    }
  
    .zhes_52 {
      width: 240rpx;
      background-color: rgba(249, 191, 65, 1);
      border-radius: 100rpx;
      height: 72rpx;
      line-height: 72rpx;
    }
  }
  .zhes_3 {
    height: 32rpx;
    line-height: 32rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
</style>